<template>
  <div class='container'>
    原帅
    <el-card>
      <!--      面包屑-->
      <div :class="{crumbsShow:!this.$route.query.id}" class="breadcrumb">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/subjects/list' }">学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{ this.$route.query.subjectName }}</el-breadcrumb-item>
          <el-breadcrumb-item>目录管理</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!--  搜索表单 添加按钮-->
      <el-row :gutter="24">
        <el-col :span="18">
          <div>
            <el-form :inline="true" class="demo-form-inline">
              <el-form-item label="目录名称">
                <el-input v-model.trim="searchKeyFrom.directoryName"></el-input>
              </el-form-item>
              <el-form-item label="状态">
                <el-select v-model.trim="searchKeyFrom.state" placeholder="请选择">
                  <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button @click="onClear">清除</el-button>
                <el-button type="primary" @click="goToBy">搜索</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="6" class="block">
          <div class="grid-content bg-purple">
            <span :class="{crumbsShow:!this.$route.query.id}">
              <el-button icon="el-icon-arrow-left" type="text" @click="onBack">返回学科</el-button>
            </span>
            <el-button icon="el-icon-edit" size="small" type="success" @click="onClick">新增目录</el-button>
          </div>
        </el-col>
      </el-row>
      <!--  数据提示文案-->
      <el-alert
          :title="title"
          show-icon
          type="info">
      </el-alert>
      <!--  学科表单-->
      <el-table
          :data="directorysData"
          max-height="1000"
          size="mini"
          style="width: 100%"
      >
        <el-table-column
            label="序号"
            type="index"
            width="50">
        </el-table-column>
        <el-table-column
            label="所属学科"
            prop="subjectName">
        </el-table-column>
        <el-table-column
            label="目录名称"
            prop="directoryName">
        </el-table-column>
        <el-table-column
            label="创建者"
            prop="username"
        >
        </el-table-column>
        <el-table-column
            label="创建日期"
            prop="addDate">
          <template v-slot="scope">
            {{ new Date(scope.row.addDate)| parseTime }}
          </template>
        </el-table-column>
        <el-table-column
            label="面试题数量"
            prop="totals">
        </el-table-column>
        <el-table-column
            label="状态">
          <template v-slot="scope">
            {{ scope.row.state === 1 ? '已启用' : '已禁用' }}
          </template>
        </el-table-column>
        <el-table-column
            label="操作"
            prop="address">
          <template v-slot="scope">
            <el-button type="text" @click="onState(scope.row)">{{ scope.row.state === 0 ? '启用' : '禁用' }}</el-button>
            <el-button :disabled="scope.row.state===0" type="text" @click="updateDirectory(scope.row.id)">修改</el-button>
            <el-button :disabled="scope.row.state===0" type="text" @click="deleteDirectory(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--  分页按钮-->
      <div :class="{show:counts<=10}" class="block">
        <el-pagination
            :current-page="directoryForm.page"
            :page-size.sync="directoryForm.pagesize"
            :page-sizes="[5, 10, 20, 50]"
            :total="counts-0"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange">
        </el-pagination>
      </div>
    </el-card>
    <!--    新增目录弹出框组件-->
    <addDirectory

        :isAddDirectoryDialog.sync="isAddDirectoryDialog"
        :subjectsSimple="subjectsSimple"
        :userID="this.$route.query.id"
        @loadDirectorsList="loadDirectorsList"
    ></addDirectory>
    <!--    编辑目录-->
    <updateDirectory
        v-if="isShow"
        :directorySimple="directorySimple"
        :isShow="isShow"
        :isUpdateDirectoryDialog.sync="isUpdateDirectoryDialog"
        :subjectsSimple="subjectsSimple"
        :userID="this.$route.query.id"
        @loadDirectorsList="loadDirectorsList"
    >
    </updateDirectory>
  </div>
</template>

<script>

import { changeState, directoryDetail, directoryList, removeDirectory } from '../../api/hmmm/directorys'
import { subjectsSimple } from '../../api/hmmm/subjects'
import addDirectory from '../views/directorys-add'
import updateDirectory from '../views/directorys-Update'

export default {
  name: 'Directory',
  data () {
    return {
      // 搜素功能数据
      searchKeyFrom: {},
      directoryForm: {
        subjectID: '',
        page: 1, // 当前页码
        pagesize: 10 // 每页条数
      },
      options: [{ // 搜索状态选项
        value: '1',
        label: '启用'
      },
      {
        value: '0',
        label: '禁用'
      }],
      directorysData: [], // 数据列表
      subjectsSimple: [], // 学科简单列表
      directorySimple: {}, // ，目录简单列表
      counts: '', // 总记录数
      disabledState: false, // 控制按钮状态
      disabledStateForm: { // 修改状态数据表
        id: '',
        state: ''
      },
      isAddDirectoryDialog: false, // 控制新增目录是否弹出变量，
      isUpdateDirectoryDialog: false, // 控制编辑目录弹框是否弹出变量1
      isShow: true
    }
  },
  components: {
    addDirectory,
    updateDirectory
  },
  computed: {
    title () {
      return !this.counts.length ? '数据一共' + this.counts + '条' : '数据一共0条'
    }
  },
  created () {
    // this.loadDirectorsList()
    this.appointDirectory()
    this.loadDirectorsList()
  },
  methods: {
    // 分页
    handleSizeChange (val) {
      this.directoryForm.pagesize = val
      this.loadDirectorsList()
    },
    // 分页
    handleCurrentChange (val) {
      this.directoryForm.page = val
      this.loadDirectorsList()
    },
    // 重置表单
    onClear () {
      this.directoryForm = {}
      this.searchKeyFrom = {}
      this.loadDirectorsList()
    },
    // 查询
    goToBy () {
      this.directoryForm = {
        ...this.searchKeyFrom
      }
      this.loadDirectorsList()
    },
    // // // 表单数据渲染
    async loadDirectorsList () {
      if (this.$route.query.id) return this.appointDirectory()
      const { data } = await directoryList(this.directoryForm)
      this.directorysData = data.items
      this.counts = data.counts
    },
    // 修改状态
    async onState (row) {
      this.disabledStateForm.id = row.id
      if (row.state === 1) {
        this.disabledStateForm.state = 0
      } else {
        this.disabledStateForm.state = 1
      }
      await changeState(this.disabledStateForm)
      await this.loadDirectorsList()
      if (this.searchKeyFrom !== {} && this.counts === 0) {
        await this.loadDirectorsList()
      } else if (!this.directorysData.length) {
        this.directoryForm.page--
        await this.loadDirectorsList()
      }
      this.$message.success('修改成功')
    },
    //  点击删除目录
    deleteDirectory (id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await removeDirectory(id)
        await this.loadDirectorsList()
        if (this.searchKeyFrom !== {} && this.counts === 0) {
          await this.loadDirectorsList()
        } else {
          this.directoryForm.page--
          await this.loadDirectorsList()
        }
        this.$message.success('删除成功!')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 获取学科简单列表
    async getSubjectsSimple () {
      const res = await subjectsSimple()
      this.subjectsSimple = res.data
    },
    //  添加目录
    async onClick () {
      this.isAddDirectoryDialog = true
      await this.getSubjectsSimple()
    },
    // 修改目录
    async updateDirectory (id) {
      this.isShow = true
      setTimeout(() => {
        this.isUpdateDirectoryDialog = true
      }, 500)
      const res = await directoryDetail(id)
      console.log(res.data)
      this.directorySimple = res.data
      await this.getSubjectsSimple()
    },
    //  根据id获取相应id数据
    async appointDirectory () {
      this.directoryForm.subjectID = this.$route.query.id
      const { data } = await directoryList(this.directoryForm)
      this.directorysData = data.items
      this.counts = data.counts
    },
    // 返回学科管理
    onBack () {
      this.$router.push('/subjects/list')
    }
  }
}
</script>

<style lang='less' scoped>
.breadcrumb {
  margin-bottom: 20px;
}

.crumbsShow {
  display: none;
}

.el-input {
  .el-input__inner {
    width: 200px;
  }
}

/deep/ .block {
  display: flex;
  justify-content: flex-end;

  .el-button {
    margin-left: 10px !important;
  }
}

.show {
  display: none !important;
}

/deep/ .el-breadcrumb__inner {
  color: #606266 !important;
}
</style>
